<template>
  <a-modal :width="1200" v-model:visible="showDetail" :footer="false" title="申购明细" title-align="start" :mask-closable="false" @cancel="closedDialog">
    <div class="purchase-application-item-detail">
      <a-scrollbar style="height: 100%; overflow: auto" outer-class="product-info-w">
        <div class="product-info">
          <div class="img-w">
            <ImgPopover :src="detailInfo.productImg">
              <template #con>
                <a-image width="120" height="120" fit="contain" :src="detailInfo.productImg" :preview="false" />
              </template>
            </ImgPopover>
          </div>
          <div>
            <div class="sku-info">
              <p>品名：{{ detailInfo.productName }}</p>
              <p>SKU：{{ detailInfo.sku }}</p>
              <p>SPU：{{ detailInfo.spu }}</p>
              <p>类目：{{ detailInfo.cateName }}</p>
              <p>规格：{{ getProductSpecs(detailInfo) }}</p>
              <p>备注：{{ detailInfo.remark }}</p>
            </div>
            <div class="purchase-info">
              <template v-if="detailInfo.purchaseSpecsArr">
                <div class="header">
                  <p class="title">采购参数</p>
                </div>
                <p v-for="(prop, k) in detailInfo.purchaseSpecsArr" :key="k">
                  <span>{{ prop.name }}：</span>
                  <span>{{ getStrVal(prop.purchaseValue) }}</span>
                </p>
              </template>
            </div>
          </div>
        </div>
      </a-scrollbar>
      <a-scrollbar outer-class="application-info-w" style="height: 100%; overflow: auto">
        <p style="margin-bottom: 20px">
          <span class="label">扣减库存：</span>
          <span>{{ detailInfo.deductionType === 0 ? '不扣减' : detailInfo.outWarehouseName }}</span>
        </p>
        <ul class="flex flex-wrap">
          <li v-for="(item, i) in descList" :key="i">
            <span class="label">{{ item.label }}：</span>
            <span :class="item.class">{{ item.value }}</span>
          </li>
        </ul>
      </a-scrollbar>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, getCurrentInstance } from 'vue'
  import { parseJson, getStrVal } from '@/utils'
  import { cloneDeep } from 'lodash-es'
  const { proxy } = getCurrentInstance()
  const emit = defineEmits(['closed'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    source: {
      //demander需求方申购单  demanderItem需求方申购明细 purchaser采购方申购单  purchaserItem采购方申购明细
      type: String,
      default: 'demander',
    },
    currentItem: {
      type: Object,
      default: () => {},
    },
    tab: {
      type: String,
      default: '1',
    },
  })

  const showDetail = ref(props.isShow)
  const detailInfo = ref<any>({})
  const descList = ref<Array<any>>([])

  // 获取详情
  async function getDetail() {
    detailInfo.value = cloneDeep(props.currentItem)
    let purchaseSpecs = detailInfo.value.purchaseSpecs ? parseJson(detailInfo.value.purchaseSpecs, {}) : {}
    detailInfo.value.purchaseSpecsArr = Object.values(purchaseSpecs)
    console.log(detailInfo.value)
    descList.value = [
      { label: '入库单号', value: detailInfo.value.billNo, class: 'highlight' },
      { label: '申购单号', value: detailInfo.value.planNo, class: '' },
      { label: '收货仓', value: detailInfo.value.warehouseName, class: '' },
      { label: '签收人', value: detailInfo.value.warehouseUname, class: '' },
      { label: '申购人', value: detailInfo.value.salesmanName, class: '' },
      { label: '采购员', value: detailInfo.value.purchaseUname, class: '' },
      { label: '专属店铺', value: detailInfo.value.shopName, class: '' },
      { label: '创建时间', value: proxy.$setTime(detailInfo.value.gmtCreate), class: '' },
      { label: '入库数量', value: detailInfo.value.warehouseAmt, class: '' },
      { label: '签收时间', value: proxy.$setTime(detailInfo.value.gmtFinished), class: '' },
      { label: '实际签收数量', value: detailInfo.value.warehouseRealAmt, class: '' },
      { label: '入库材质重量', value: detailInfo.value.materialWeight, class: '' },
      { label: '材质单价', value: '￥' + detailInfo.value.materialPrice, class: '' },
      { label: '实收材质重量', value: detailInfo.value.materialRealWeight, class: '' },
      { label: '工费单价', value: '￥' + detailInfo.value.laborPrice, class: '' },
      { label: '产品单价', value: '￥' + detailInfo.value.productPrice, class: '' },
      { label: '材质金额', value: '￥' + detailInfo.value.materialAmount, class: '' },
      { label: '税率', value: detailInfo.value.rate + '%', class: '' },
      { label: '工费', value: '￥' + detailInfo.value.laborAmount, class: '' },
      { label: '产品金额', value: '￥' + detailInfo.value.productAmount, class: '' },
      { label: '合计金额', value: '￥' + detailInfo.value.totalAmount, class: '' },
      { label: '其他费用', value: '￥' + detailInfo.value.otherAmount, class: '' },
      { label: '单件货值', value: '￥' + detailInfo.value.singleAmount, class: '' },
      { label: '税金', value: '￥' + detailInfo.value.taxAmount, class: '' },
    ]
  }
  getDetail()
  // 关闭
  function closedDialog() {
    showDetail.value = false
    emit('closed')
  }

  // 显示sku规格
  function getProductSpecs(item: any) {
    let productSpecs = item.productSpecs ? parseJson(item.productSpecs, []) : []
    return productSpecs.map((el: any) => el.valueCn)?.join('*') || '--'
  }
</script>

<style lang="less" scoped>
  .purchase-application-item-detail {
    height: calc(84vh - 100px);
    display: flex;
    .product-info-w {
      width: 50%;
      border-right: 1px solid #ddd;
      padding-right: 10px;
      flex-shrink: 0;
    }
    .product-info {
      display: flex;
      .img-w {
        margin-right: 10px;
        width: 120px;
        height: 120px;
        border: 1px solid #eee;
        overflow: hidden;
        flex-shrink: 0;
        margin-right: 10px;
      }
      .sku-info {
        font-size: 13px;
        line-height: 16px;
        p {
          margin-bottom: 6px;
        }
      }
      .purchase-info {
        margin-top: 30px;
        font-size: 12px;
        line-height: 16px;
        p {
          margin-bottom: 6px;
        }
        .header {
          font-size: 14px;
          font-weight: bold;
          line-height: 16px;
          margin-bottom: 10px;
          border-left: 3px solid rgb(var(--primary-4));
          padding-left: 10px;
          .title {
            margin-right: 30px;
            width: 90px;
          }
        }
      }
    }

    .application-info-w {
      height: 100%;
      flex: 1;
      padding-left: 10px;
      width: 50%;
      li {
        width: 50%;
        margin-bottom: 10px;
      }
      .label {
        color: #888;
      }
    }
  }
</style>
